<template>
    <div class="templateDiv">
        <div class="silder">
            <silder :imgs="imgs"></silder>
        </div>
        <div id="buy">
            <h4 v-text="goodsInfo.title"></h4>
            <p class="line"></p>
        <ul>
            <li class="price">
            市场价: <s>￥{{goodsInfo.market_price}}</s>    
            销售价：<span>￥{{goodsInfo.sell_price}}</span>
            </li>
            <li class="inputli">
            <div class="count">
                <span>购买数量：</span>
             <inputNumber v-on:dataobj="getMessage"></inputNumber>
             </div>  
            </li>
            <li>
            <mt-button type="primary" size="small">立即购买</mt-button>
        <mt-button type="danger" size="small">加入购物车</mt-button>
            </li>
        </ul>
        </div>
            <div id="params">
            <h6>商品参数</h6>
            <p class="line"></p>
            <ul>
                <li>商品货号：{{goodsInfo.goods_no}}</li>
                <li>库存情况：{{goodsInfo.stock_quantity}}</li>
                <li>上架时间：{{goodsInfo.add_time | dateFmt('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <div id="other">
            <!-- <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button> -->
            <router-link v-bind="{to:'/goods/goodsdesc/'+goodsId}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
            </router-link>
            <!-- <mt-button type="danger" size="large">商品评论</mt-button> -->
            <router-link v-bind="{to:'/goods/goodscomment/'+goodsId}">
                <mt-button type="danger" size="large">商品评论</mt-button>
            </router-link>
        </div>
</div>
</template>

<script>
    import silder from "../Slide.vue";
    import InputNumber from "../../subcomponents/InputNumber.vue";
    export default {
        components:{
            silder:silder,
            inputNumber:InputNumber
            },

        data:function(){
            return {
                goodsId:0,
                imgs:[],
                goodsInfo:{}
            }
        },
        methods:{
            //详情页轮播图
            getMessage:function(count){
            console.log(count);
             },
            getimgs:function(){
                var url=this.$urlPrefix+"/api/getthumimages/"+this.goodsId;
                this.$http.get(url).then(function(response){
                    this.imgs=response.body.message;
                    var tempUrlList =[ "http://www.people.com.cn/mediafile/pic/20150917/23/10030234897474881435.jpg",
                         "http://jiangsu.china.com.cn/uploadfile/2016/0413/1460530872607118.jpg"
                    ];
                    this.imgs=tempUrlList;
                })
            },
            //详情页信息
            getGoodsinfo:function(){
                var url=this.$urlPrefix+"/api/goods/getinfo/"+this.goodsId;
                this.$http.get(url).then(function(response){
                    this.goodsInfo=response.body.message[0];
                })
            }
        },
        created:function(){
            this.goodsId=this.$route.params.goodsId;
            this.getimgs();
            this.getGoodsinfo();
        }
    }
</script>

<style scoped>
    .silder{
         border:1px solid rgba(0,0,0,0.4);
         border-radius: 5px;
         margin: 5px;
     }
    #buy,#params,#other{
        margin: 5px;
        padding: 5px;
        border:1px solid rgba(0,0,0,0.4);
        border-radius: 5px;
    }
    .line{
        height: 1px;
        border: 1px solid rgba(0,0,0,0.2);
    }
    #buy ul,#params ul{
        padding-left: 0px;
    }
     #buy h4{
        color:#0094ff;
        padding: 5px;
     }
     #buy li,#params li{
         list-style: none;
         padding: 8px;
     }
    #buy .price span{
        color:red;
    }
    #other .imgdesc{
        margin-bottom: 20px;
    }
    .inputli{
        position: relative;
    }
    .count {
        display: flex;
    }
</style>